<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
 -- CPSC 544, Fall 2009
 -- @author vtsao
 -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Healthy Shelf</title>

	<!-- import the stylesheet for this page -->
	<link type="text/css" href="css/hs.css" rel="Stylesheet" />

	<!-- import Google bootstrapper code -->
	<script src="http://www.google.com/jsapi"></script>

	<script type="text/javascript">

		var CUP = "cup";
		var BOX = "box";
		var DV = "dv";

		var DECIMAL_PLACES = 1;

		var WHATS_THIS = {calories: "These are calories.",
						  fat: "This is fat.",
						  saturated: "This is saturated fat.",
						  trans: "This is trans fat.",
						  cholesterol: "This is cholesterol.",
						  sodium: "This is sodium.",
						  carbohydrate: "This is carbohydrate.",
						  fibre: "This is fibre.",
						  sugars: "These are sugars.",
						  protein: "This is protein.",
						  vitaminA: "This is vitamin A.",
						  vitaminC: "This is vitamin C.",
						  calcium: "This is calcium.",
						  iron: "This is iron.",
						  vitaminD: "This is vitamin D.",
						  thiamin: "This is thiamin.",
						  riboflavin: "This is riboflavin.",
						  niacin: "This is niacin.",
						  vitaminB6: "This is vitamin B6.",
						  folate: "This is folate.",
						  vitaminB12: "This is vitamin B12.",
						  pantothenate: "This is pantothenate.",
						  phosphorus: "This is phosphorus.",
						  magnesium: "This is magnesium.",
						  zinc: "This is zinc."};

		var _isComparing = false;

		google.load ("jquery", "1.3.2");
		google.setOnLoadCallback (init);

		/**
		 * Handler to initialize the page when the document is ready.
		 */
		function init ()
		{
			initHomeScreen ();

			// set the on window resize handler
			$ (window).resize (function ()
			{
				if ($ ("#ssSettings:visible").length > 0)
					centerSSMenu ();

				if ($ ("#homeScreen:visible").length > 0)
					centerHomeScreen ();
			});

			// initialize overlay controls
			$ ("#overlayCancel").click (function ()
			{
				closeOverlay ();
			});

			// add "what's this" to all the nutrients and vitamins
			$ (".nutrientName").before ("<img class=\"whatsThis\" src=\"img/whatsThisIcon.gif\" alt=\"What's This?\" />");
			$ (".vitaminName").before ("<img class=\"whatsThis\" src=\"img/whatsThisIcon.gif\" alt=\"What's This?\" />");

			$ (".whatsThis").click (function ()
			{
				alert (WHATS_THIS[$ (this).parent ().attr ("id")]);
			});

			// add drill down to the nutrients fat and carbohydrate
			makeDrillable ($ ("#fat"));
			makeDrillable ($ ("#carbohydrate"));

			// add serving size settings function
			$ ("#ssUnits").after ("<img id=\"settingsIconSS\" src=\"img/settings.png\" alt=\"settings\" />");
			$ ("#settingsIconSS").click (function ()
			{
				if ($ ("#ssUnits").text ().indexOf (CUP) != -1)
					makeSSMenu (CUP);
				else if ($ ("#ssUnits").text ().indexOf (BOX) != -1)
					makeSSMenu (BOX);

				$ ("#overlay").show ();
				centerSSMenu ();
			});

			$ ("#overlayOK").click (function ()
			{
				calculateSS ($ ("#ss").text (), $ ("#ss").text (), $ ("#ssSettingsForm input:visible:radio[name=ssMenu]:checked").val ());
				closeOverlay ();
			});

			// add settings for daily value
			$ ("#dvHeading").before ("<img id=\"settingsIconDV\" src=\"img/settings.png\" alt=\"settings\" />");
			$ ("#settingsIconDV").click (function ()
			{
				makeSSMenu (DV);
				$ ("#overlay").show ();
				centerSSMenu ();
			});

			// add compare to function
			$ ("#toolbar").append ("<span id=\"compareTo\"><img src=\"img/compareTo.png\" alt=\"compareTo\" /></span>");
			$ ("#compareTo").click (function ()
			{
				_isComparing = true;

				// hide the label
				$ ("#label").animate ({marginLeft: "-400px", marginRight: "400px", opacity: "0"}, 500, function ()
				{
					$ (this).hide ();

					// hide the compare to button
					$ ("#compareTo").hide ();
				});

				// hide the home icon
				$ ("#homeIcon").fadeOut (300);

				// change the logo to instructions
				$ ("#healthyShelfLogo").html ("<img src=\"img/compareInstructions.png\" alt=\"compare instructions\" />");

				// slide in the home screen
				$ ("#homeScreen").css ("margin-left", "400px");
				$ ("#homeScreen").css ("opacity", "0");
				$ ("#homeScreen").show ();

				var marginLeft = ($ (window).width () - $ ("#homeScreen").width ()) / 2;
				$ ("#homeScreen").animate ({marginLeft: marginLeft, opacity: "1"}, 500);
			});
		}

		/**
		 * Rounds the specified number to the specified amount of decimal
		 * spaces.
		 *
		 * @param number
		 * @param decimal
		 * @return
		 */
		function round2 (number, decimal)
		{
			var m = Math.pow (10, decimal);
			return Math.round (number * m) / m;
		}

		/**
		 * Helper function to initialize the home screen.
		 */
		function initHomeScreen ()
		{
			centerHomeScreen ();

			// add hover effect to each icon in the home screen
			$ (".productIcon").hover (function ()
			{
				$ (this).css ("background-color", "#DDDDDD");
			},
			function ()
			{
				$ (this).css ("background-color", "#FFFFFF");
			});

			// add the click handler for a product
			$ (".productIcon").click (function ()
			{
				// if we're in compare mode, we need to load the other product
				if (_isComparing)
				{
					compareProduct ($ (this).attr ("id"));
				}
				else
				{
					loadProduct ($ (this).attr ("id"), false);
				}

				// slide out the home screen
				$ ("#homeScreen").animate ({marginLeft: "-400px", opacity: "0"}, 500, function ()
				{
					$ (this).hide ();
				});

				// slide in the nutritional label
				$ ("#label").css ("margin-left", "400px");
				$ ("#label").css ("margin-right", "-400px");
				$ ("#label").css ("opacity", "0");
				$ ("#label").show ();
				$ ("#label").animate ({marginLeft: "25px", marginRight: "25px", opacity: "1"}, 500);

				$ ("#homeIcon").fadeIn (300);
			});

			// add the click handler for the home icon
			$ ("#homeIcon").click (function ()
			{
				// hide the label
				$ ("#label").animate ({marginLeft: "-400px", marginRight: "400px", opacity: "0"}, 500, function ()
				{
					$ (this).hide ();

					if (_isComparing)
					{
						unCompare ();
						_isComparing = false;
					}
				});

				// hide the home icon
				$ ("#homeIcon").fadeOut (300);

				// make sure the home screen is displaying the Healthy Shelf logo
				$ ("#healthyShelfLogo").html ("<img src=\"img/HealthyShelfLogo.png\" alt=\"Healthy Shelf\" />");

				// slide in the home screen
				$ ("#homeScreen").css ("margin-left", "400px");
				$ ("#homeScreen").css ("opacity", "0");
				$ ("#homeScreen").show ();

				var marginLeft = ($ (window).width () - $ ("#homeScreen").width ()) / 2;
				$ ("#homeScreen").animate ({marginLeft: marginLeft, opacity: "1"}, 500);
			});

			$ ("#homeScreen").show ();
		}

		/**
		 * Helper function to close the overlay if it is open.
		 */
		function closeOverlay ()
		{
			$ ("#overlay").hide ();
		}

		/**
		 * Helper method to center the overlay.
		 */
		function centerSSMenu ()
		{
			var marginTop = ($ (window).height () - $ ("#ssSettings").height ()) / 2;
			var marginLeft = ($ (window).width () - $ ("#ssSettings").width ()) / 2;
			$ ("#ssSettings").css ("margin-top", marginTop);
			$ ("#ssSettings").css ("margin-left", marginLeft);
		}

		/**
		 * Helper method to center the home screen.
		 */
		function centerHomeScreen ()
		{
			var marginTop = ($ (window).height () - $ ("#homeScreen").height ()) / 2;
			var marginLeft = ($ (window).width () - $ ("#homeScreen").width ()) / 2;
			$ ("#homeScreen").css ("margin-top", marginTop);
			$ ("#homeScreen").css ("margin-left", marginLeft);
		}

		/**
		 * Loads the specified product.
		 *
		 * @param productFilename The name of the XML file that represents the
		 *						  product.
		 * @param isCompareProduct
		 */
		function loadProduct (productFilename, isCompareProduct)
		{
			$.get ("products/" + productFilename, function (xml)
			{
				// first read in all the necessary information

				// product name
				var name = $ (xml).find ("Name").text ();

				// serving size
				var ss = $ (xml).find ("Serving").find ("Size").text ();
				var ssUnits = $ (xml).find ("Serving").find ("Units").text ();

				// calories
				var calories = $ (xml).find ("Calories").text ();

				// fat
				var fatPercent = $ (xml).find ("Fat").children ("Percent").text ();
				var fatAmount = $ (xml).find ("Fat").children ("Content").find ("Amount").text ();
				var fatUnits = $ (xml).find ("Fat").children ("Content").find ("Units").text ();

				// saturated fat
				var saturatedPercent = $ (xml).find ("Fat").find ("Saturated").find ("Percent").text ();
				var saturatedAmount = $ (xml).find ("Fat").find ("Saturated").find ("Content").find ("Amount").text ();
				var saturatedUnits = $ (xml).find ("Fat").find ("Saturated").find ("Content").find ("Units").text ();

				// trans fat
				var transAmount = $ (xml).find ("Trans").find ("Content").find ("Amount").text ();
				var transUnits = $ (xml).find ("Trans").find ("Content").find ("Units").text ();

				// cholesterol
				var cholesterolPercent = $ (xml).find ("Cholesterol").find ("Percent").text ();
				var cholesterolAmount = $ (xml).find ("Cholesterol").find ("Content").find ("Amount").text ();
				var cholesterolUnits = $ (xml).find ("Cholesterol").find ("Content").find ("Units").text ();

				// sodium
				var sodiumPercent = $ (xml).find ("Sodium").find ("Percent").text ();
				var sodiumAmount = $ (xml).find ("Sodium").find ("Content").find ("Amount").text ();
				var sodiumUnits = $ (xml).find ("Sodium").find ("Content").find ("Units").text ();

				// carbohydrate
				var carbohydratePercent = $ (xml).find ("Carbohydrate").children ("Percent").text ();
				var carbohydrateAmount = $ (xml).find ("Carbohydrate").children ("Content").find ("Amount").text ();
				var carbohydrateUnits = $ (xml).find ("Carbohydrate").children ("Content").find ("Units").text ();

				// fibre
				var fibrePercent = $ (xml).find ("Fibre").find ("Percent").text ();
				var fibreAmount = $ (xml).find ("Fibre").find ("Content").find ("Amount").text ();
				var fibreUnits = $ (xml).find ("Fibre").find ("Content").find ("Units").text ();

				// sugars
				var sugarsAmount = $ (xml).find ("Sugars").find ("Content").find ("Amount").text ();
				var sugarsUnits = $ (xml).find ("Sugars").find ("Content").find ("Units").text ();

				// protein
				var proteinAmount = $ (xml).find ("Protein").find ("Content").find ("Amount").text ();
				var proteinUnits = $ (xml).find ("Protein").find ("Content").find ("Units").text ();

				// vitamins
				var vitaminA = $ (xml).find ("VitaminA").find ("Percent").text ();
				var vitaminC = $ (xml).find ("VitaminC").find ("Percent").text ();
				var calcium = $ (xml).find ("Calcium").find ("Percent").text ();
				var iron = $ (xml).find ("Iron").find ("Percent").text ();
				var vitaminD = $ (xml).find ("VitaminD").find ("Percent").text ();
				var thiamin = $ (xml).find ("Thiamin").find ("Percent").text ();
				var riboflavin = $ (xml).find ("Riboflavin").find ("Percent").text ();
				var niacin = $ (xml).find ("Niacin").find ("Percent").text ();
				var vitaminB6 = $ (xml).find ("VitaminB6").find ("Percent").text ();
				var folate = $ (xml).find ("Folate").find ("Percent").text ();
				var vitaminB12 = $ (xml).find ("VitaminB12").find ("Percent").text ();
				var pantothenate = $ (xml).find ("Pantothenate").find ("Percent").text ();
				var phosphorus = $ (xml).find ("Phosphorus").find ("Percent").text ();
				var magnesium = $ (xml).find ("Magnesium").find ("Percent").text ();
				var zinc = $ (xml).find ("Zinc").find ("Percent").text ();

				// now fill in the interactive label with the above
				// let's not allow HTML injection ya? use text () not html ()

				// serving size and product name
				if (!isCompareProduct)
				{
					$ ("#ss").text (ss);
					$ ("#ssUnits").text (ssUnits);

					$ ("#productName").text (name);
				}
				else
				{
					$ ("#product1").text ($ ("#productName").text ());
					$ ("#product2").text (name);
				}

				if (!isCompareProduct)
				{
					// calories
					$ ("#calories .nutrientAmount").text (calories);

					// fat
					$ ("#fat .nutrientAmount").text (fatAmount);
					$ ("#fat .nutrientUnits").text (fatUnits);
					$ ("#fat .nutrientDV").text (fatPercent);

					$ ("#saturated .nutrientAmount").text (saturatedAmount);
					$ ("#saturated .nutrientUnits").text (saturatedUnits);
					$ ("#saturated .nutrientDV").text (saturatedPercent);

					$ ("#trans .nutrientAmount").text (transAmount);
					$ ("#trans .nutrientUnits").text (transUnits);

					// cholesterol
					$ ("#cholesterol .nutrientAmount").text (cholesterolAmount);
					$ ("#cholesterol .nutrientUnits").text (cholesterolUnits);
					$ ("#cholesterol .nutrientDV").text (cholesterolPercent);

					// sodium
					$ ("#sodium .nutrientAmount").text (sodiumAmount);
					$ ("#sodium .nutrientUnits").text (sodiumUnits);
					$ ("#sodium .nutrientDV").text (sodiumPercent);

					// carbohydrate
					$ ("#carbohydrate .nutrientAmount").text (carbohydrateAmount);
					$ ("#carbohydrate .nutrientUnits").text (carbohydrateUnits);
					$ ("#carbohydrate .nutrientDV").text (carbohydratePercent);

					$ ("#fibre .nutrientAmount").text (fibreAmount);
					$ ("#fibre .nutrientUnits").text (fibreUnits);
					$ ("#fibre .nutrientDV").text (fibrePercent);

					$ ("#sugars .nutrientAmount").text (sugarsAmount);
					$ ("#sugars .nutrientUnits").text (sugarsUnits);

					// protein
					$ ("#protein .nutrientAmount").text (proteinAmount);
					$ ("#protein .nutrientUnits").text (proteinUnits);

					// vitamins
					$ ("#vitaminA .vitaminDV").text (vitaminA);
					$ ("#vitaminC .vitaminDV").text (vitaminC);
					$ ("#calcium .vitaminDV").text (calcium);
					$ ("#iron .vitaminDV").text (iron);

					setVitamin (vitaminD, "#vitaminD", false);
					setVitamin (thiamin, "#thiamin", false);
					setVitamin (riboflavin, "#riboflavin", false);
					setVitamin (niacin, "#niacin", false);
					setVitamin (vitaminB6, "#vitaminB6", false);
					setVitamin (folate, "#folate", false);
					setVitamin (vitaminB12, "#vitaminB12", false);
					setVitamin (pantothenate, "#pantothenate", false);
					setVitamin (phosphorus, "#phosphorus", false);
					setVitamin (magnesium, "#magnesium", false);
					setVitamin (zinc, "#zinc", false);

					// finally append % to the end of all DV's
					$ (".nutrientDV, .vitaminDV").each (function ()
					{
						$ (this).text ($ (this).text () + " %");
					});

					// set it in the serving size settings menu as well
					$ ("#ssSettingsForm input:radio[name=ssMenu]").each (function ()
					{
						if ($ (this).val () == ss)
							$ (this).attr ("checked", "checked");
					});
				}
				else
				{
					// calories
					$ ("#calories .nutrientAmount2").text (calories);

					// fat
					$ ("#fat .nutrientAmount2").text (fatAmount);
					$ ("#fat .nutrientUnits2").text (fatUnits);
					$ ("#fat .nutrientDV2").text (fatPercent);

					$ ("#saturated .nutrientAmount2").text (saturatedAmount);
					$ ("#saturated .nutrientUnits2").text (saturatedUnits);
					$ ("#saturated .nutrientDV2").text (saturatedPercent);

					$ ("#trans .nutrientAmount2").text (transAmount);
					$ ("#trans .nutrientUnits2").text (transUnits);

					// cholesterol
					$ ("#cholesterol .nutrientAmount2").text (cholesterolAmount);
					$ ("#cholesterol .nutrientUnits2").text (cholesterolUnits);
					$ ("#cholesterol .nutrientDV2").text (cholesterolPercent);

					// sodium
					$ ("#sodium .nutrientAmount2").text (sodiumAmount);
					$ ("#sodium .nutrientUnits2").text (sodiumUnits);
					$ ("#sodium .nutrientDV2").text (sodiumPercent);

					// carbohydrate
					$ ("#carbohydrate .nutrientAmount2").text (carbohydrateAmount);
					$ ("#carbohydrate .nutrientUnits2").text (carbohydrateUnits);
					$ ("#carbohydrate .nutrientDV2").text (carbohydratePercent);

					$ ("#fibre .nutrientAmount2").text (fibreAmount);
					$ ("#fibre .nutrientUnits2").text (fibreUnits);
					$ ("#fibre .nutrientDV2").text (fibrePercent);

					$ ("#sugars .nutrientAmount2").text (sugarsAmount);
					$ ("#sugars .nutrientUnits2").text (sugarsUnits);

					// protein
					$ ("#protein .nutrientAmount2").text (proteinAmount);
					$ ("#protein .nutrientUnits2").text (proteinUnits);

					// vitamins
					$ ("#vitaminA .vitaminDV2").text (vitaminA);
					$ ("#vitaminC .vitaminDV2").text (vitaminC);
					$ ("#calcium .vitaminDV2").text (calcium);
					$ ("#iron .vitaminDV2").text (iron);

					setVitamin (vitaminD, "#vitaminD", true);
					setVitamin (thiamin, "#thiamin", true);
					setVitamin (riboflavin, "#riboflavin", true);
					setVitamin (niacin, "#niacin", true);
					setVitamin (vitaminB6, "#vitaminB6", true);
					setVitamin (folate, "#folate", true);
					setVitamin (vitaminB12, "#vitaminB12", true);
					setVitamin (pantothenate, "#pantothenate", true);
					setVitamin (phosphorus, "#phosphorus", true);
					setVitamin (magnesium, "#magnesium", true);
					setVitamin (zinc, "#zinc", true);

					// append % to the end of all DV's
					$ (".nutrientDV2, .vitaminDV2").each (function ()
					{
						$ (this).text ($ (this).text () + " %");
					});

					// finally calculate the serving sizes so they are equal
					var ssP1 = fractionToDecimal ($ ("#ss").text ());
					var ssP2 = fractionToDecimal (ss);
					var smaller;

					if (ssP1 > ssP2)
						smaller = ss;
					else
						smaller = $ ("#ss").text ();

					calculateSS ($ ("#ss").text (), ss, smaller);

					// set it in the serving size settings menu as well
					$ ("#ssSettingsForm input:radio[name=ssMenu]").each (function ()
					{
						if ($ (this).val () == smaller)
							$ (this).attr ("checked", "checked");
					});

					// hide the product name
					$ ("#productName").text ("Comparing Products");
				}
			});
		}

		/**
		 *
		 * @param vitamin
		 * @param id
		 * @param isCompare
		 */
		function setVitamin (vitamin, id, isCompare)
		{
			var dvClass = ".vitaminDV";

			if (isCompare)
				dvClass += "2";

			if (vitamin != '' && vitamin != "0 %")
			{
				$ (id + " " + dvClass).text (vitamin);
				$ (id).show ();
			}
			else
			{
				$ (id + " " + dvClass).text ("0");

				// in this case if the vitamin is already shown, leave it
				if (isCompare && $ (id + ":visible").length <= 0)
					$ (id).hide ();
				else if (!isCompare)
					$ (id).hide ();
			}
		}

		/**
		 *
		 * @param product
		 */
		function compareProduct (product)
		{
			// prepare the information area for the other product
			$ ("#fat, #saturated, #sodium, #cholesterol, #carbohydrate, #fibre").each (function ()
			{
				$ (this).children (".contents").before ("<span class=\"nutrientDV2\"></span><span class=\"contents2\"><span class=\"nutrientAmount2\"></span><span class=\"nutrientUnits2\"></span></span>");

				var nutrientDV = $ (this).children (".nutrientDV");
				nutrientDV.insertBefore (nutrientDV.siblings (".contents"));
				nutrientDV.css ("margin-right", "50px");
			});

			$ ("#calories, #trans, #sugars, #protein").each (function ()
			{
				$ (this).children (".contents").before ("<span class=\"contents2\"><span class=\"nutrientAmount2\"></span><span class=\"nutrientUnits2\"></span></span>");
				$ (this).children (".contents").css ("margin-right", "130px");

				$ (this).children (".contents2").css ("margin-right", "115px");
			});

			$ (".contents").css ("float", "right");
			$ (".contents").css ("text-align", "right");

			$ (".vitaminDV").each (function ()
			{
				$ (this).before ("<span class=\"vitaminDV2\"></span>");
				$ (this).css ("margin-right", "150px");
			});

			// add another table heading for the products
			$ ("#tableHeading").before ("<div id=\"tableHeading2\"><span id=\"product2\"></span><span id=\"product1\"></span><div class=\"clear\"></div></div>");
			$ ("#tableHeading").css ("border-bottom", "1px solid #000000");
			$ ("#tableHeading").css ("padding", "6px 0 6px 0");

			// adjust the current table heading for the new compare layout
			$ ("#settingsIconDV").after ("<span id=\"amountHeading2\" style=\"float: right; font-size: 80%; margin-right: 50px;\">Amount</span>");
			$ ("#settingsIconDV").after ("<span id=\"dvHeading2\" style=\"float: right; font-size: 80%; margin-right: 15px;\">% DV</span>");
			$ ("#amountHeading").insertAfter ("#dvHeading");
			$ ("#amountHeading").css ("float", "right");
			$ ("#amountHeading").css ("font-size", "80%");
			$ ("#amountHeading").css ("margin-right", "50px");
			$ ("#dvHeading").css ("font-size", "80%");
			$ ("#dvHeading").css ("margin-right", "100px");
			$ ("#dvHeading").text ("% DV");

			// load the other product
			loadProduct (product, true);
		}

		/**
		 * Helper method to restore the label to normal when comparison is done.
		 */
		function unCompare ()
		{
			$ ("#compareTo").show ();
			$ ("#productName").show ();

			$ (".nutrientDV2, .contents2, .nutrientAmount2, .vitaminDV2, #tableHeading2, #followedBy, #amountHeading2, #dvHeading2").remove ();

			$ ("#fat, #saturated, #sodium, #cholesterol, #carbohydrate, #fibre").each (function ()
			{
				var nutrientDV = $ (this).children (".nutrientDV");
				nutrientDV.insertAfter (nutrientDV.siblings (".contents"));
				nutrientDV.css ("margin-right", "35px");
			});

			$ ("#calories, #trans, #sugars, #protein").each (function ()
			{
				$ (this).children (".contents").css ("margin-right", "0px");
			});

			$ (".contents").css ("float", "none");
			$ (".contents").css ("text-align", "left");

			$ (".vitaminDV").css ("margin-right", "35px");
			$ ("#tableHeading").css ("border-bottom", "none");

			// restore heading
			$ ("#tableHeading").css ("padding", "12px 0 12px 0");
			$ ("#amountHeading").insertBefore ("#dvHeading");
			$ ("#amountHeading").css ("float", "none");
			$ ("#amountHeading").css ("font-size", "100%");
			$ ("#amountHeading").css ("margin-right", "50px");
			$ ("#dvHeading").css ("font-size", "100%");
			$ ("#dvHeading").css ("margin-right", "15px");
			$ ("#dvHeading").text ("% Daily Value");
		}

		/**
		 * Makes a menu of the specified type, TODO: vtsao - poorly named
		 * function.
		 *
		 * @param type
		 *
		 */
		function makeSSMenu (type)
		{
			switch (type)
			{
				case CUP:

					$ ("#ssSettingsTitle").text ("Adjust Serving Size");
					$ ("#cupUnits").show ();
					$ ("#boxUnits").hide ();
					$ ("#dvUnits").hide ();

					break;

				case BOX:

					$ ("#ssSettingsTitle").text ("Adjust Serving Size");
					$ ("#cupUnits").hide ();
					$ ("#boxUnits").show ();
					$ ("#dvUnits").hide ();

					break;

				case DV:

					$ ("#ssSettingsTitle").text ("Adjust Daily Value");
					$ ("#cupUnits").hide ();
					$ ("#boxUnits").hide ();
					$ ("#dvUnits").show ();

					break;
			}
		}

		/**
		 * Closes one of the two products being compared.
		 *
		 * @param product The product to close.
		 */
		function closeProduct (product)
		{
			// TODO: vtsao - feature omitted for user study
		}

		/**
		 * Calculates the daily value percentage for each nutrient based on the
		 * specified calorie diet and updates it on the GUI.
		 *
		 * @param calories The calories per day diet the DV should be based on.
		 */
		function calculateDV (calories)
		{
			// TODO: vtsao - feature omitted for user study
		}

		/**
		 * Calculates the nutrient amounts and daily value percentages based on
		 * the specified serving size.
		 *
		 */
		function calculateSS (from1, from2, newSS)
		{
			var units = $ ("#ssUnits").text ();

			// replace the ss with the new ss
			$ ("#ss").text (newSS);

			var ss1 = fractionToDecimal (from1);
			var ss2 = fractionToDecimal (from2);
			newSS = fractionToDecimal (newSS);

			var ratio1 = newSS / ss1;
			var ratio2 = newSS / ss2;

			// now recalculate all the nutrient amounts
			$ (".nutrientAmount").each (function ()
			{
				var currentAmount = Number ($ (this).text ());
				var newAmount = currentAmount * ratio1;
				$ (this).text (round2 (newAmount, DECIMAL_PLACES));
			});

			// now recalculate all the nutrient amounts
			$ (".nutrientAmount2").each (function ()
			{
				var currentAmount = Number ($ (this).text ());
				var newAmount = currentAmount * ratio2;
				$ (this).text (round2 (newAmount, DECIMAL_PLACES));
			});

			// recaculate all the DV's
			$ (".nutrientDV, .vitaminDV").each (function ()
			{
				var currentAmount = parseFloat ($ (this).text ());
				var newAmount = currentAmount * ratio1;
				$ (this).text (round2 (newAmount, DECIMAL_PLACES) + " %");
			});

			// recaculate all the DV's
			$ (".nutrientDV2, .vitaminDV2").each (function ()
			{
				var currentAmount = parseFloat ($ (this).text ());
				var newAmount = currentAmount * ratio2;
				$ (this).text (round2 (newAmount, DECIMAL_PLACES) + " %");
			});
		}

		/**
		 * Helper function to convert a fraction to decimal format.
		 *
		 * @param fraction The fraction as a string in the format "[a ]b/c", eg:
		 *                 3 4/5 or 34/4
		 * @return The fraction in decimal format.
		 */
		function fractionToDecimal (fraction)
		{
			var a, b, c;

			if (fraction.indexOf (' ') != -1)
			{
				var fractionSplit = fraction.split (' ');
				var numDenSplit = fractionSplit[1].split ('/');
				a = Number (fractionSplit[0]);
				b = Number (numDenSplit[0]);
				c = Number (numDenSplit[1]);
			}
			else if (fraction.indexOf ('/') != -1)
			{
				var numDenSplit = fraction.split ('/');
				a = 0;
				b = Number (numDenSplit[0]);
				c = Number (numDenSplit[1]);
			}
			else
				return fraction;

			return (((c * a) + b) / c);
		}

		/**
		 * Makes the specified nutrient drillable.
		 *
		 * @param nutrient A dom element retrieved using jQuery that represents
		 *				   a nutrient.
		 */
		function makeDrillable (nutrient)
		{
			// add the button to indicate this nutrient is drillable
			nutrient.children (".nutrientDV").after ("<span class=\"drillDownButton\"><img src=\"img/toggleUp.png\" alt=\"toggle\" /></span>");

			// add the drill down button functionality
			nutrient.children (".drillDownButton").click (function ()
			{
				var drilled = nutrient.children ("div");

				if (drilled.is (":hidden"))
				{
					drilled.slideDown ("fast");
					nutrient.children (".drillDownButton").children ("img").attr ("src", "img/toggleUp.png");
				}
				else
				{
					drilled.slideUp ("fast");
					nutrient.children (".drillDownButton").children ("img").attr ("src", "img/toggleDown.png");
				}
			});
		}

		/**
		 * Increases the font size of everything in the label by one step.
		 */
		function zoomIn ()
		{
		}

		/**
		 * Decreases the font size of everything in the label by one step.
		 */
		function zoomOut ()
		{
		}
	</script>
</head>
<body>
	<div id="homeScreen">
		<div id="healthyShelfLogo"><img src="img/HealthyShelfLogo.png" alt="Healthy Shelf" /></div>
		<div class="row">
			<div id="4CheesePastaSauce.xml" class="productIcon">
				<img src="img/4CheesePastaSauce.png" alt="food" />
			</div>
			<div id="6VegetableMedleyPastaSauce.xml" class="productIcon">
				<img src="img/6VegetableMedleyPastaSauce.png" alt="food" />
			</div>
			<div id="Kelloggs5Grains.xml" class="productIcon">
				<img src="img/Kelloggs5Grains.png" alt="food" />
			</div>
			<div id="KelloggsAllBranOriginal.xml" class="productIcon">
				<img src="img/KelloggsAllBrainOriginal.png" alt="food" />
			</div>
		</div>
		<div class="row">
			<div id="KelloggsSatisfaction.xml" class="productIcon">
				<img src="img/KelloggsSatisfaction.png" alt="food" />
			</div>
			<div id="Linguini.xml" class="productIcon">
				<img src="img/Linguini.png" alt="food" />
			</div>
			<div id="LongGrainBrownRice.xml" class="productIcon">
				<img src="img/LongGrainBrownRice.png" alt="food" />
			</div>
			<div id="MultigrainFusilli.xml" class="productIcon">
				<img src="img/MultigrainFusilli.png" alt="food" />
			</div>
		</div>
		<div class="row">
			<div id="PeasAndCarrots.xml" class="productIcon">
				<img src="img/PeasAndCarrots.png" alt="food" />
			</div>
			<div id="WholeBabyCorn.xml" class="productIcon">
				<img src="img/WholeBabyCorn.png" alt="food" />
			</div>
		</div>
	</div>
	<div id="overlay">
		<div id="ssSettings">
			<div id="ssSettingsTitle">Adjust Serving Size</div>
			<div id="ssSettingsForm">
				<form id="cupUnits">
					<input type="radio" name="ssMenu" value="1/4" />1/4 Cup<br />
					<input type="radio" name="ssMenu" value="1/2" />1/2 Cup<br />
					<input type="radio" name="ssMenu" value="3/4" />3/4 Cup<br />
					<input type="radio" name="ssMenu" value="1" />1 Cup<br />
					<input type="radio" name="ssMenu" value="1 1/4" />1 1/4 Cup<br />
					<input type="radio" name="ssMenu" value="1 1/2" />1 1/2 Cup<br />
					<input type="radio" name="ssMenu" value="1 3/4" />1 3/4 Cup<br />
					<input type="radio" name="ssMenu" value="2" />2 Cups<br />
					<input type="radio" name="ssMenu" value="2 1/4" />2 1/4 Cups<br />
					<input type="radio" name="ssMenu" value="2 1/2" />2 1/2 Cups<br />
					<input type="radio" name="ssMenu" value="2 3/4" />2 3/4 Cups<br />
					<input type="radio" name="ssMenu" value="3" />3 Cups<br />
					<input type="radio" name="ssMenu" value="3 1/4" />3 1/4 Cups<br />
					<input type="radio" name="ssMenu" value="3 1/2" />3 1/2 Cups<br />
					<input type="radio" name="ssMenu" value="3 3/4" />3 3/4 Cups<br />
					<input type="radio" name="ssMenu" value="4" />4 Cups
				</form>
				<form id="boxUnits">
					<input type="radio" name="ssMenu" value="1/6" />1/6 Box<br />
					<input type="radio" name="ssMenu" value="1/3" />1/3 Box<br />
					<input type="radio" name="ssMenu" value="1/2" />1/2 Box<br />
					<input type="radio" name="ssMenu" value="2/3" />2/3 Box<br />
					<input type="radio" name="ssMenu" value="5/6" />5/6 Box<br />
					<input type="radio" name="ssMenu" value="1" />1 Box<br />
					<input type="radio" name="ssMenu" value="1 1/6" />1 1/6 Boxes<br />
					<input type="radio" name="ssMenu" value="1 1/3" />1 1/3 Boxes<br />
					<input type="radio" name="ssMenu" value="1 1/2" />1 1/2 Boxes<br />
					<input type="radio" name="ssMenu" value="1 2/3" />1 2/3 Boxes<br />
					<input type="radio" name="ssMenu" value="1 5/6" />1 5/6 Boxes<br />
					<input type="radio" name="ssMenu" value="2" />2 Boxes<br />
					<input type="radio" name="ssMenu" value="2 1/6" />2 1/6 Boxes<br />
					<input type="radio" name="ssMenu" value="2 1/3" />2 1/3 Boxes<br />
					<input type="radio" name="ssMenu" value="2 1/2" />2 1/2 Boxes<br />
					<input type="radio" name="ssMenu" value="2 2/3" />2 2/3 Boxes<br />
					<input type="radio" name="ssMenu" value="2 5/6" />2 5/6 Boxes<br />
					<input type="radio" name="ssMenu" value="3" />3 Boxes
				</form>
				<form id="dvUnits">
					<input type="radio" name="ssMenu" value="1500" />1500 Calories<br />
					<input type="radio" name="ssMenu" value="1750" />1750 Calories<br />
					<input type="radio" name="ssMenu" value="2000" checked="checked" />2000 Calories<br />
					<input type="radio" name="ssMenu" value="2250" />2250 Calories<br />
					<input type="radio" name="ssMenu" value="2500" />2500 Calories<br />
					<input type="radio" name="ssMenu" value="2750" />2750 Calories<br />
				</form>
			</div>
			<div id="ssSettingsButtons">
				<input id="overlayOK" type="submit" value="OK" />
				<input id="overlayCancel" type="submit" value="Cancel" />
			</div>
		</div>
	</div>
	<div id="label">
		<div id="toolbar"></div>
		<div id="title">
			<span>Nutrition Facts</span>
			<span id="productName"></span>
		</div>
		<div id="ssContainer">
			<span>Per </span>
			<span id="ss"></span>
			<span id="ssUnits"></span>
		</div>
		<div id="tableHeading">
			<span id="amountHeading">Amount</span>
			<span id="dvHeading">% Daily Value</span>
		</div>
		<div id="calories" class="nutrient">
			<span class="nutrientName">Calories</span>
			<span class="contents">
				<span class="nutrientAmount"></span>
			</span>
		</div>
		<div id="fat" class="nutrient">
			<span class="nutrientName">Fat</span>
			<span class="contents">
				<span class="nutrientAmount"></span>
				<span class="nutrientUnits"></span>
			</span>
			<span class="nutrientDV"></span>
			<div id="saturated" class="subNutrient">
				<span class="nutrientName">Saturated</span>
				<span class="contents">
					<span class="nutrientAmount"></span>
					<span class="nutrientUnits"></span>
				</span>
				<span class="nutrientDV"></span>
			</div>
			<div id="trans" class="subNutrient">
				<span class="nutrientName">+ Trans</span>
				<span class="contents">
					<span class="nutrientAmount"></span>
					<span class="nutrientUnits"></span>
				</span>
			</div>
		</div>
		<div id="cholesterol" class="nutrient">
			<span class="nutrientName">Cholesterol</span>
			<span class="contents">
				<span class="nutrientAmount"></span>
				<span class="nutrientUnits"></span>
			</span>
			<span class="nutrientDV"></span>
		</div>
		<div id="sodium" class="nutrient">
			<span class="nutrientName">Sodium</span>
			<span class="contents">
				<span class="nutrientAmount"></span>
				<span class="nutrientUnits"></span>
			</span>
			<span class="nutrientDV"></span>
		</div>
		<div id="carbohydrate" class="nutrient">
			<span class="nutrientName">Carbohydrate</span>
			<span class="contents">
				<span class="nutrientAmount"></span>
				<span class="nutrientUnits"></span>
			</span>
			<span class="nutrientDV"></span>
			<div id="fibre" class="subNutrient">
				<span class="nutrientName">Fibre</span>
				<span class="contents">
					<span class="nutrientAmount"></span>
					<span class="nutrientUnits"></span>
				</span>
				<span class="nutrientDV"></span>
			</div>
			<div id="sugars" class="subNutrient">
				<span class="nutrientName">Sugars</span>
				<span class="contents">
					<span class="nutrientAmount"></span>
					<span class="nutrientUnits"></span>
				</span>
			</div>
		</div>
		<div id="protein" class="nutrient">
			<span class="nutrientName">Protein</span>
			<span class="contents">
				<span class="nutrientAmount"></span>
				<span class="nutrientUnits"></span>
			</span>
		</div>
		<div id="vitaminA" class="vitamin">
			<span class="vitaminName">Vitamin A</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="vitaminC" class="vitamin">
			<span class="vitaminName">Vitamin C</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="calcium" class="vitamin">
			<span class="vitaminName">Calcium</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="iron" class="vitamin">
			<span class="vitaminName">Iron</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="vitaminD" class="vitamin">
			<span class="vitaminName">Vitamin D</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="thiamin" class="vitamin">
			<span class="vitaminName">Thiamin</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="riboflavin" class="vitamin">
			<span class="vitaminName">Riboflavin</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="niacin" class="vitamin">
			<span class="vitaminName">Niacin</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="vitaminB6" class="vitamin">
			<span class="vitaminName">Vitamin B6</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="folate" class="vitamin">
			<span class="vitaminName">Folate</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="vitaminB12" class="vitamin">
			<span class="vitaminName">Vitamin B12</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="pantothenate" class="vitamin">
			<span class="vitaminName">Pantothenate</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="phosphorus" class="vitamin">
			<span class="vitaminName">Phosphorus</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="magnesium" class="vitamin">
			<span class="vitaminName">Magnesium</span>
			<span class="vitaminDV"></span>
		</div>
		<div id="zinc" class="vitamin">
			<span class="vitaminName">Zinc</span>
			<span class="vitaminDV"></span>
		</div>
	</div>
	<div id="homeIcon"><img src="img/homeIcon.png" alt="home" /></div>
</body>
</html>
